<template>
  <div class="app-container">
    <div class="query-area">
      <a-row>
        <a-col :span="18">
          <a-form
            :model="queryParams"
            ref="queryRef"
            layout="inline"
            class="query-form"
          >
            <a-form-item label="标题" field="title">
              <a-input
                v-model="queryParams.title"
                placeholder="请输入标题"
                allow-clear
                style="width: 200px"
                @keyup.enter="handleQuery"
              />
            </a-form-item>
            <!-- <a-form-item label="分类" field="classifyId">
              <a-select
                v-model="queryParams.classifyId"
                placeholder="请选择分类"
                allow-clear
                style="width: 200px"
              >
                <a-option
                  v-for="dict in typeOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </a-select>
            </a-form-item> -->
            <a-form-item label="有效状态" field="effectiveStatus">
              <a-select
                v-model="queryParams.effectiveStatus"
                placeholder="请选择有效状态"
                allow-clear
                style="width: 200px"
              >
                <a-option
                  v-for="dict in is_effective"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </a-select>
            </a-form-item>
            <a-form-item>
              <a-space>
                <a-button type="primary" icon="Search" @click="handleQuery"
                  >搜索</a-button
                >
                <a-button @click="resetQuery">重置</a-button>
              </a-space>
            </a-form-item>
          </a-form>
        </a-col>
        <right-toolbar
          v-model:showMoreSearch="showMoreSearch"
          @queryTable="getList"
        ></right-toolbar>
      </a-row>
    </div>

    <div class="operation-area">
      <a-row class="operation-row">
        <a-space>
          <a-button type="primary" @click="handleAdd">内容发布</a-button>
          <a-button type="primary" @click="styleSetting">样式设置</a-button>
          <a-button type="primary" @click="typeSetting">分类设置</a-button>
          <a-button
            :disabled="multiple"
            type="primary"
            @click="handleEffective(1)"
            >置为有效</a-button
          >
          <a-button
            :disabled="multiple"
            type="primary"
            status="danger"
            @click="handleEffective(0)"
            >置为无效</a-button
          >
        </a-space>
      </a-row>
    </div>

    <div class="table-area">
      <a-table
        class="custom-table"
        :loading="loading"
        :columns="columns"
        :data="comBusinessContentList"
        :row-selection="rowSelection"
        v-model:selected-keys="ids"
        row-key="contentId"
        :pagination="{
          total: total,
          current: queryParams.pageNum,
          pageSize: queryParams.pageSize,
          showJumper: true,
          showTotal: true,
          showPageSize: true,
          pageSizeOptions: [10, 20, 30, 50, 100, 200]
        }"
        @page-change="tablePageChange"
        @page-size-change="tablePageSizeChange"
      >
        <template #styleType="{ record }">
          <dict-tag :options="func_article_style" :value="record.styleType" />
        </template>
        <template #publishTime="{ record }">
          <span>{{ parseTime(record.publishTime, '{y}-{m}-{d}') }}</span>
        </template>
        <template #isShowPublishTime="{ record }">
          <dict-tag :options="is_show" :value="record.isShowPublishTime" />
        </template>
        <template #img="{ record }">
          <image-preview :src="record.img" :width="50" :height="50" />
        </template>
        <template #effectiveStatus="{ record }">
          <dict-tag :options="is_effective" :value="record.effectiveStatus" />
        </template>
        <template #createTime="{ record }">
          <span>{{ parseTime(record.createTime, '{y}-{m}-{d}') }}</span>
        </template>
        <template #optional="{ record }">
          <a-space>
            <a-button type="text" @click="handleUpdate(record)">编辑</a-button>
            <a-button
              type="text"
              :disabled="record.effectiveStatus == 1"
              status="danger"
              @click="handleDelete(record)"
              >删除</a-button
            >
          </a-space>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script setup name="ComBusinessContent">
import {
  listComBusinessContent,
  delComBusinessContent,
  effectiveStatus
} from '@/api/common/comBusinessContent'
import { allListComBusinessClassify } from '@/api/common/comBusinessClassify'
import { Modal, Message } from '@arco-design/web-vue'
const router = useRouter()
const route = useRoute()
const { proxy } = getCurrentInstance()
const { is_show, publish_status, is_effective, func_article_style } =
  proxy.useDict(
    'is_show',
    'publish_status',
    'is_effective',
    'func_article_style'
  )
const queryRef = ref(null)
const comBusinessContentList = ref([])
const loading = ref(true)
const showMoreSearch = ref(false)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const functionCode = ref(route.fullPath.split('/').slice(-1)[0])
// const typeOptions = ref([])
const rowSelection = reactive({
  type: 'checkbox',
  showCheckedAll: true,
  onlyCurrent: true
})
const columns = ref([
  {
    title: '序号',
    render: (data) => data.rowIndex + 1 // 添加序号
  },
  {
    title: '标题',
    dataIndex: 'title'
  },
  {
    title: '分类',
    dataIndex: 'classifyName'
  },
  {
    title: '创建时间',
    slotName: 'createTime'
  },
  {
    title: '发布时间',
    slotName: 'publishTime'
  },

  {
    title: '创建人',
    dataIndex: 'createName'
  },
  {
    title: '有效状态',
    slotName: 'effectiveStatus'
  },
  {
    title: '操作',
    slotName: 'optional',
    width: 200,
    align: 'center'
  }
])

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    title: null,
    // classifyId: null,
    effectiveStatus: null,
    functionCode: functionCode.value
  }
})

const { queryParams } = toRefs(data)

// 是否包含有效数据
const includeEffective = computed(() => {
  const selectedItems = comBusinessContentList.value.filter((item) =>
    ids.value.includes(item.contentId)
  )
  return selectedItems.some((item) => parseInt(item.effectiveStatus) === 1)
})

watch(
  () => ids.value,
  () => {
    single.value = ids.value.length !== 1
    multiple.value = !ids.value.length
  }
)

/** 查询业务管理-内容发布列表 */
function getList() {
  loading.value = true
  listComBusinessContent(queryParams.value).then((response) => {
    comBusinessContentList.value = response.rows
    total.value = response.total
    loading.value = false
  })
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

/** 重置按钮操作 */
function resetQuery() {
  queryRef.value.resetFields()
  handleQuery()
}

// 分页变化
function tablePageChange(pageNum) {
  queryParams.value.pageNum = pageNum
  getList()
}

// 每页数据数量
function tablePageSizeChange(pageSize) {
  queryParams.value.pageSize = pageSize
  handleQuery()
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _contentIds = row.contentId || ids.value
  Modal.warning({
    title: '确认删除',
    content: '是否确认删除所选数据？',
    hideCancel: false,
    onOk: () => {
      delComBusinessContent(_contentIds).then((res) => {
        getList()
        Message.success('删除成功')
      })
    }
  })
}

/** 置为有效/置为无效按钮操作 */
function handleEffective(operateType) {
  const _contentIds = ids.value
  Modal.warning({
    title: '确认',
    content:
      '是否确认将选中数据置为' + (operateType === 0 ? '无效' : '有效') + '？',
    hideCancel: false,
    onOk: () => {
      effectiveStatus({
        idList: _contentIds,
        operateType
      }).then((res) => {
        getList()
        Message.success('操作成功')
      })
    }
  })
}

/** 新增按钮操作 */
function handleAdd() {
  router.push({
    path: '/businessManagement/addArticle/' + functionCode.value
  })
}

/** 编辑按钮操作 */
function handleUpdate(row, flag) {
  router.push({
    path:
      '/businessManagement/editArticle/' +
      functionCode.value +
      '/' +
      row.contentId
  })
}
function typeSetting() {
  router.push({
    path: '/businessManagement/typeSetting/' + functionCode.value
  })
}

function styleSetting() {
  let url = router.resolve({
    path: '/appInventFunc',
    query: { pageType: 'SPECIAL', functionCode: functionCode.value }
  })

  window.open(url.href, '_blank')
}

// function getTypeList() {
//   allListComBusinessClassify({ functionCode: functionCode.value }).then(
//     (response) => {
//       typeOptions.value = response.data.map((i) => ({
//         label: i.classifyName,
//         value: i.classifyId
//       }))
//     }
//   )
// }
// getTypeList()

getList()
</script>
